var PurchaseOrderDetail = function () {
  var template = /* html */ `
    <div class="purchase-order-detail">
      <div class="purchase-detail-stat">
        <span>欠数：{{stat.oweCount}}</span>
        <span style="margin-left:20px">拖期单数：{{stat.orderCount}}</span>
      </div>
      <div class="purchase-detail-table-div">
        <el-table fit stripe border :data="detailList" style="width: 100%" height="parent">
          <el-table-column label="订单编号" prop="companyOrderId" min-width="140px" header-align="center">
          </el-table-column>
          <el-table-column label="工厂型号" prop="factoryNo" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column label="客户型号" prop="articleNo" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column label="供应商" prop="providerName" min-width="140px" header-align="center">
          </el-table-column>
          <el-table-column label="物料名称" prop="materialName" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column label="规格" prop="model" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column label="编号" prop="color" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column :resizable="false" label="制单时间" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.createTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="最大复期" width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.laterPhase">{{moment(scope.row.laterPhase).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="采购数量" prop="purchaseCount" min-width="100px" align="center">
          </el-table-column>
          <el-table-column label="入库数量" prop="inCount" min-width="100px" align="center">
          </el-table-column>
          <el-table-column label="欠数" prop="oweCount" min-width="100px" align="center">
            <template slot-scope="scope">
              <span class="is-follow">{{scope.row.oweCount}}</span>
            </template>
          </el-table-column>
          <el-table-column label="拖期天数" prop="tardiness" min-width="100px" align="center">
            <template slot-scope="scope">
              <span :class="{'is-follow':scope.row.tardiness>0}">{{scope.row.tardiness}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  `;

  return {
    props: {
      order: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        detailList:this.order.orders,
        stat:this.calDetailStat(),
        moment:moment
      };
    },

    methods:{
      calDetailStat:function(){
        var detailList = this.order.orders;
        var orderCount = 0,
          sumOweCount = 0;
        for (var i = 0; i < detailList.length; i++) {
          var detail = detailList[i];
          if (detail.oweCount > 0) {
            sumOweCount++;
          }
          if (detail.tardiness > 0) {
            orderCount++;
          }
        }
        return {
          oweCount: sumOweCount,
          orderCount: orderCount
        };
      }
    },

    template: template
  };
}();
